<template>
  <div class="map-wrapper">
    <div id="map"></div>
    <div class="actions"></div>
  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import { defaults } from 'ol/control'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Fill, Stroke, Circle, Style, Text, Icon } from 'ol/style'
import * as olInteraction from 'ol/interaction'
import { TileImage as TileImageSource } from 'ol/source'
import { GeoJSON } from 'ol/format'
import axios from 'axios'
export default {
  components: {},
  props: {},
  data() {
    return {
      map1: null,
      areaLayer: null, //区县
      floodLayer: null, //流域
      floodLayerJson: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initMap1()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    initMap1() {
      this.map1 = new Map({
        target: 'map',
        logo: false,
        layers: [],
        view: new View({
          projection: 'EPSG:4326',
          //center: [116.302429, 30.530761],
          center: [116.502429, 30.530761],
          zoom: 8.6, // 默认缩放级别
          // minZoom: 8.6, // 最小缩放级别
          // maxZoom: 8.6, // 最大缩放级别
          extent: [
            96.93069229487698, 20.104814507140834, 137.82743636345742,
            42.58926069041331
          ]
        }),
        // 设置地图控件，默认的三个控件都不显示
        controls: defaults({
          attribution: false,
          rotate: false,
          zoom: false
        }),
        interactions: new olInteraction.defaults({
          dragPan: false, // 禁用拖拽
          mouseWheelZoom: false // 禁用鼠标滚动缩放
        })
      })
      this.initCommonLayer('map1') //加载基础图层
    },
    async initCommonLayer(key) {
      const map = this[key]
      const res = await axios.get('/aq-geojson/340800_full.json')
      console.log('res', res)
      let geoJson = res.data
      this.areaLayer = new VectorLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(geoJson)
        }),
        style: function (feature) {
          return new Style({
            stroke: new Stroke({
              color: '#ccc',
              width: 2,
              lineDash: [10, 20]
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255,0)'
            }),
            text: new Text({
              text: feature.get('name'),
              font: 'bold 14px sans-serif',
              fill: new Fill({
                color: 'rgba(255, 255, 255)'
              })
            })
          })
        },
        zIndex: 2
      })
      this.areaLayer.set('name', 'district')
      //行政区划轮廓
      const res_xzqh = await axios.get('/aq-geojson/xzqh.json')
      let xzqhJson = res_xzqh.data
      const anqingBnd = new GeoJSON().readFeatures(xzqhJson)[0]
      anqingBnd.setStyle(
        new Style({
          stroke: new Stroke({
            color: '#fff',
            width: 2
          })
        })
      )
      this.areaLayer.getSource().addFeature(anqingBnd)

      map.addLayer(this.areaLayer) // 添加图层
      //河流调整
      axios
        .get(
          'https://aq.zhslapp.com:20103/geoserver/aqzhsl_slgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=aqzhsl_slgc%3Ageo_rv&outputFormat=application%2Fjson&Authkey=330b5664-21fd-4680-bcbf-fabf73e077b8'
        )
        .then(res => {
          let riverLayer = new VectorLayer({
            source: new VectorSource({
              features: new GeoJSON().readFeatures(res.data)
            }),
            style: function (feature) {
              return new Style({
                stroke: new Stroke({
                  color: 'rgb(41,133,247,0.8)',
                  width: 2
                }),
                fill: new Fill({
                  color: 'rgb(41,133,247,0.8)'
                }),
                text: new Text({
                  font: 'bold 12px sans-serif',
                  fill: new Fill({
                    color: 'rgba(255, 255, 255)'
                  })
                })
              })
            },
            zIndex: 3
          })
          riverLayer.set('name', 'river')
          map.addLayer(riverLayer)
        })
      //湖泊
      axios.get('/aq-geojson/Lake_anqing.json').then(res => {
        let lakeLayer = new VectorLayer({
          source: new VectorSource({
            features: new GeoJSON().readFeatures(res.data)
          }),
          style: function (feature) {
            return new Style({
              fill: new Fill({
                color: 'rgb(41,133,247,0.8)'
                // color: 'red'
              }),
              text: new Text({
                text: feature.get('name'),
                font: 'bold 12px sans-serif',
                fill: new Fill({
                  color: 'rgba(255, 255, 255)'
                })
              })
            })
          },
          zIndex: 2,
          visible: true
        })
        lakeLayer.set('name', 'lake')
        map.addLayer(lakeLayer)
      })
      //流域
      const res_flood = await axios.get(
        'https://aq.zhslapp.com:20103/geoserver/aqzhsl_slgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=aqzhsl_slgc%3Ageo_basin_divide_aq&outputFormat=application%2Fjson&Authkey=330b5664-21fd-4680-bcbf-fabf73e077b8'
      )
      let floodJson = res_flood.data
      this.floodLayerJson = res_flood.data.features
      this.floodLayer = new VectorLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(floodJson)
        }),
        style: null,
        zIndex: 2
      })
      this.floodLayer.set('name', 'flood')
      map.addLayer(this.floodLayer)
    },
    //type 1 区县，2河流  3湖泊
    createdBaselayer(geoJson, type) {
      let baseLayer = {}
      if (type == 1) {
        baseLayer = new VectorLayer({
          source: new VectorSource({
            features: new GeoJSON().readFeatures(geoJson)
          }),
          style: function (feature) {
            return new Style({
              stroke: new Stroke({
                color: '#ccc',
                width: 2,
                lineDash: [10, 20]
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255,0)'
              }),
              text: new Text({
                text: feature.get('name'),
                font: 'bold 14px sans-serif',
                fill: new Fill({
                  color: 'rgba(255, 255, 255)'
                })
              })
            })
          },
          zIndex: 2
        })
        baseLayer.set('name', 'district')
      } else if (type == 2) {
        baseLayer = new VectorLayer({
          source: new VectorSource({
            features: new GeoJSON().readFeatures(geoJson)
          }),
          style: function (feature) {
            return new Style({
              stroke: new Stroke({
                color: 'rgb(41,133,247,0.8)',
                width: 2
              }),
              fill: new Fill({
                color: 'rgb(41,133,247,0.8)'
              }),
              text: new Text({
                // text: feature.get('name'),
                font: 'bold 12px sans-serif',
                fill: new Fill({
                  color: 'rgba(255, 255, 255)'
                })
              })
            })
          },
          zIndex: 2
        })
        baseLayer.set('name', 'river')
      } else if (type == 3) {
        baseLayer = new VectorLayer({
          source: new VectorSource({
            features: new GeoJSON().readFeatures(geoJson)
          }),
          style: function (feature) {
            return new Style({
              fill: new Fill({
                color: 'rgb(41,133,247,0.8)'
              }),
              text: new Text({
                text: feature.get('name'),
                font: 'bold 12px sans-serif',
                fill: new Fill({
                  color: 'rgba(255, 255, 255)'
                })
              })
            })
          },
          zIndex: 2,
          visible: true
        })
        baseLayer.set('name', 'lake')
      }
      return baseLayer
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.map-wrapper {
  height: 100%;
  position: relative;
  #map {
    height: 100%;
    width: 100%;
    background: url(./images/map-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
